import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import { Location, reverseGeocoder } from '@/utils/common/lbs'

import './index.scss'
import { Icon } from '@/components/Icon'


export interface IAddressProps {
    onLoad: (address: Location) => void
}

export const Address: React.FC<IAddressProps> = (props) => {
    const [location, setLocation] = useState('定位中...')
    useEffect(() => {
        reverseGeocoder().then((data: any) => {
            setLocation(data.result.address_component.city + data.result.address_component.district)
            props.onLoad && props.onLoad(data.result)
        })
    }, [])
    return (
        <View className="xxm-address">
            <View className="xxm-address__content">
                <View className="xxm-address__left">
                    <Icon size={16} name="map" color="#fff" />
                </View>
                <View className="xxm-address__title xxm-ellipsis">
                    {location}
                </View>
                <View className="xxm-address__right">
                    <Icon size={14} name="arrow-right" color="#fff" />
                </View>
            </View>
        </View>
    )
}

